<template>
	<view class="box e-flex-y">
		<view class="e-m-b-38 e-flex-xy-center">
			<app-image :size="['320rpx', '224rpx']" src="order/error.png" />
		</view>
		<view class="e-m-b-30 text-center">
			{{ $t('order.支付失败') }}
		</view>
		<view class="e-m-b-40 text-center">
			{{ msg }}
		</view>
		<view class="e-flex">
			<button class="e-m-r-20" @tap="backHome">{{ $t('order.返回首页') }}</button>
			<button @tap="$back()">{{ $t('order.重新支付') }}</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { useInit } from '@/common/stores';
import { useCurrentInstance } from '@/common/hooks';

const props = defineProps({
	msg: String
});

const ctx = useCurrentInstance();
const {setTabbarPageIndex} = useInit()

const backHome = () => {
	setTabbarPageIndex(0);
	ctx.$switchTab('/pages/tabbar/index');
};
</script>

<style lang="scss" scoped>
.box {
	padding-top: 158rpx;
	margin: 0 auto;
	image {
		width: 320rpx;
		height: 224rpx;
	}
	button {
		width: 278rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		border: 2rpx solid #303133;
		font-size: 30rpx;
	}
}
</style>
